.workbench {
    &-layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        background-color: rgb(var(--bg-color));
        min-height: 0;
        position: relative;
    }

    &-header {
        // height: 32px;
    }

    &-toolbar-wrapper {
        max-width: calc(100% - 650px);
        pointer-events: auto;
    }

    &-container {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;

        &-header {
            position: relative;
            z-index: 10;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 12px;
        }

        &-wrapper {
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: 100%;
            height: 100%;
            overflow: hidden;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }

        &-content {
            position: relative;

            overflow: hidden;
            display: grid;
            grid-template-rows: auto 1fr;
            flex: 1;

            background-color: rgb(var(--bg-color-secondary));
            border-bottom: 1px solid rgb(var(--border-color));
        }

        &-canvas-container {
            position: relative;
            display: flex;
            height: 100%;
            width: 100%;
        }

        &-canvas {
            flex: 1;
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid transparent;

            &-focused {
                border: 1px solid rgb(var(--primary-color));
            }
        }

        &-left-sidebar {
            width: 340px;
        }
    }

    &-footer {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: calc(100% - 700px);
        background-color: rgb(var(--bg-color-secondary));
        border: 2px solid rgb(var(--border-color));
        border-radius: 8px;
        pointer-events: auto;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
}

:global {
    .react-flow__attribution {
        display: none !important;
    }
}

.float-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    > * {
        pointer-events: all;
    }
}

.flow-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.uni-node {
    &-title {
        position: absolute;
        top: -24px;
        left: 0;
        font-size: 11px;
        color: rgb(var(--grey-600));
    }

    &-container {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
    }

    &-drag-handle {
        display: flex;
        border-radius: 4px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        background-color: rgb(var(--bg-color-secondary));
        position: absolute;
        left: -32px;
        padding: 4px;
        height: 18px;
        width: 18px;
        justify-content: center;
        align-items: center;
    }
}
